<!DOCTYPE html>
<html>
    <head>
     	<meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!-- Base Css Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/fontello/css/fontello.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/animate-css/animate.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/css/component.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" /> 
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style-responsive.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.css" rel="stylesheet" type="text/css" />
        
        <!-- Extra CSS Files -->
      	<link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
        
        <!-- Custom Css Files -->
        <link href="__ADMIN_CSS__/style.css"  rel="stylesheet" />
    </head>
    <body>
    <!-- Begin page -->
	<div>
      <div class="sub-header-title">
                <h2>收件箱</h2>
      </div>
      <form method="post" class="form-horizontal" action="{:U('Mail/inbox')}">
     		<div class="form-group">
  			<div class="col-sm-2">
        		<div class="input-group">
                   	<span class="input-group-addon">日期</span>
                   	<input type="text" class="form-control" id="date-start" name="start_date" value="{$start_date}" placeholder="开始日期"/>
               	</div>
           	</div>
          	<div class="col-sm-2">
           		<div class="input-group">
                    <span class="input-group-addon">-</span>
                  	<input type="text" class="form-control" id="data-end" name="end_date" value="{$end_date}" placeholder="截止日期"/>
              	</div>
       		</div>
       		<div class="col-sm-2">
               	<input class="form-control" placeholder="根据会员编号搜索" value="{$keyword}" name="keyword" type="text">
            </div>
            <div class="col-sm-2">
                <button class="btn btn-success" type="submit">查询</button>
            </div>
        </div>
      </form>
    </div>
    <div class="widget">
        <div class="widget-content">  
           	<table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>发件人</th>
                        <th>邮件标题</th>
                        <th>状态</th>
                        <th>发件时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                	<volist name="list" id="vo">
	                 	<tr>
                        <td>
                        	<if condition="$vo['sender_no'] eq ''">
                        	系统管理员
                        	<else/>
                        	{$vo.sender_no}
                        	</if>
                        </td>
                        <td><a href="{:U('Mail/detail',array('id'=>$vo['id']))}">{$vo.title}</a></td>
                        <td>
                        	<if condition="$vo['is_read'] eq '0'">
                        	<span class="red">未读</span>
                        	<else/>
                        	<span class="green">已读</span>
                        	</if>
                        </td>
                        <td>{$vo.send_time}</td>
                        <td>
                            <a class="del" href="javascript:;" data-id="{$vo.id}">删除</a>
                        </td>
	                 	</tr>
                 	</volist>
            	</tbody>
            </table>
            {$page}
        </div>
    </div> 
    <!-- End of page -->

    <!-- Base Js Files -->
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery/jquery-1.11.1.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js"></script>
 	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-detectmobile/detect.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/fastclick/fastclick.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-slimscroll/jquery.slimscroll.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/classie.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/modalEffects.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/notify.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro-blue.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.min.js"></script>
	
	<!-- Extra Js Files -->
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/laydate/laydate.js"></script>

    <!-- Custom Js Files -->
	<script src="__ADMIN_JS__/common.js"></script>
	
    <script>
    	var start = {
   		  elem: '#date-start', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
   		 	event: 'focus', //响应事件。如果没有传入event，则按照默认的click
   		 	max: laydate.now(), //最大日期
   		  	choose: function(datas){
   		     	end.min = datas; //开始日选好后，重置结束日的最小日期
   		     	end.start = datas //将结束日的初始值设定为开始日
   		  	}
   		};
   		var end = {
   		  elem: '#data-end', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
   		 	event: 'focus', //响应事件。如果没有传入event，则按照默认的click
   		 	max: laydate.now(), //最大日期
   		  	choose: function(datas){
   		    	start.max = datas; //结束日选好后，重置开始日的最大日期
   		  	}
   		};
   		laydate(start);
   		laydate(end);

   		//绑定删除事件
		$(".del").click(function(event) {
	    	var id = $(this).data("id");
	    	
	    	//询问框
			window.parent.layer.confirm('数据删除后将无法恢复，确认删除该信息吗？', {
				btn: ['确认','取消'], //按钮
			}, function(index){
  				  // 用ajax提交表单
  		      $.post("{:U('Mail/receiverDel')}", "id="+id, function(response) {
  		      		//弹出提示
  					window.parent.layer.msg(response.message);
  		      		
  		      		//根据请求相应状态提示通知
  		       		if(response.status){
  		       			notify("success",response.message);
  						window.location.reload();
  					}else{
  						notify("error",response.message);
  					}
  		        }, 'json');
  		      	window.parent.layer.close(index);
  			});
	    });
	</script>
	</body>
</html>